<template>
  <div>
    
    <el-tree
    ref="tree"
    check-strictly
    :data="list"
    :props="{label:'name'}"
    show-checkbox
    default-expand-all
    node-key="id"
    />

    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button size="small">取消</el-button>
        <el-button size="small" type="primary" @click="hSubmit">确定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getPermissionList } from '@/api/permission'
import {tranListToTreeData} from '@/utils/index.js'
import {getRoleDetail,assignPerm} from '@/api/setting'

export default {
  props:{
    roleId:{
      type:String,
      required:true
    }
  },
  data(){
    return{
      list:[]
    }
  },
  created() {
    //获取所有的权限点
    this.loadPermission()
    //调用接口，获取当前这个角色已经具备的权限
    // this.loadPermissionById()
  },
  methods:{
    async hSubmit(){
      //保存
      const permIds = this.$refs.tree.getCheckedKeys()//当前用户选择的节点的id
      //调用api
      await assignPerm({id:this.roleId,permIds:permIds})
      //关闭弹框
      this.$emit('success')
    },
    async loadPermission(){
      const res = await getPermissionList()
      this.list = tranListToTreeData(res.data)
    },
    async loadPermissionById(){
      const res = await getRoleDetail (this.roleId)
      console.log('当前角色',res.data.permIds)
      //当前角色的权限是：res.data.permIds
      //回填
      this.$refs.tree.setCheckedKeys(res.data.permIds)
      
    }
  }
}
</script>
